<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>调试实体变更</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid mt-4">
        <h2>调试实体变更</h2>
        
        <div class="form-group">
            <label for="logId">日志ID:</label>
            <input type="text" class="form-control" id="logId" placeholder="输入日志ID">
        </div>
        
        <button class="btn btn-primary" onclick="loadLogDetail()">加载日志详情</button>
        <button class="btn btn-secondary" onclick="checkEntityChangeLog()">检查实体变更日志</button>
        
        <div id="result" class="mt-4"></div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script>
        function loadLogDetail() {
            const logId = $('#logId').val();
            if (!logId) {
                alert('请输入日志ID');
                return;
            }
            
            $.get('/sys/entityChangeLog/info?id=' + logId)
                .done(function(response) {
                    if (response.code !== 0) {
                        $('#result').html('<div class="alert alert-danger">加载失败: ' + response.msg + '</div>');
                        return;
                    }
                    
                    const data = response.data;
                    console.log('获取到的数据:', data);
                    
                    let html = '<div class="card"><div class="card-body">';
                    
                    // 显示基本信息
                    html += '<h5>基本信息</h5>';
                    html += '<p>实体类: ' + (data.entityClass || '') + '</p>';
                    html += '<p>操作类型: ' + (data.operationType || '') + '</p>';
                    html += '<p>修改前数据: <pre>' + (data.beforeData || '') + '</pre></p>';
                    html += '<p>修改后数据: <pre>' + (data.afterData || '') + '</pre></p>';
                    
                    // 显示标准字段变更信息
                    html += '<h5>标准字段变更信息</h5>';
                    if (data.fieldChanges) {
                        html += '<table class="table table-bordered">';
                        html += '<thead><tr><th>字段名</th><th>旧值</th><th>新值</th></tr></thead>';
                        html += '<tbody>';
                        
                        for (const fieldName in data.fieldChanges) {
                            const change = data.fieldChanges[fieldName];
                            html += '<tr>';
                            html += '<td>' + fieldName + '</td>';
                            html += '<td>' + JSON.stringify(change[0]) + '</td>';
                            html += '<td>' + JSON.stringify(change[1]) + '</td>';
                            html += '</tr>';
                        }
                        
                        html += '</tbody></table>';
                    } else {
                        html += '<p class="text-muted">无标准字段变更信息</p>';
                    }
                    
                    // 显示详细字段变更信息
                    html += '<h5>详细字段变更信息</h5>';
                    if (data.detailedFieldChanges && data.detailedFieldChanges.length > 0) {
                        html += '<table class="table table-bordered">';
                        html += '<thead><tr><th>字段名</th><th>字段描述</th><th>旧值</th><th>新值</th></tr></thead>';
                        html += '<tbody>';
                        
                        data.detailedFieldChanges.forEach(function(change) {
                            html += '<tr>';
                            html += '<td>' + (change.fieldName || '') + '</td>';
                            html += '<td>' + (change.fieldDescription || '') + '</td>';
                            html += '<td>' + JSON.stringify(change.oldValue) + '</td>';
                            html += '<td>' + JSON.stringify(change.newValue) + '</td>';
                            html += '</tr>';
                        });
                        
                        html += '</tbody></table>';
                    } else {
                        html += '<p class="text-muted">无详细字段变更信息</p>';
                    }
                    
                    html += '</div></div>';
                    
                    $('#result').html(html);
                })
                .fail(function(xhr) {
                    $('#result').html('<div class="alert alert-danger">请求失败: ' + xhr.responseText + '</div>');
                });
        }
        
        function checkEntityChangeLog() {
            $.get('/sys/entityChangeLog/check')
                .done(function(response) {
                    $('#result').html('<div class="alert alert-info">' + response.msg + '</div>');
                })
                .fail(function(xhr) {
                    $('#result').html('<div class="alert alert-danger">请求失败: ' + xhr.responseText + '</div>');
                });
        }
    </script>
</body>
</html>